{{#>base title=data.page.echarts_custom}}

    {{#*inline "pageContent"}}

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.echarts_custom}}
                </h3>

                <div class="tabs-wrap">
                    <ul class="nav nav-tabs">
                        <li>
                            <a href="echarts-custom-event.html">自定义事件</a>
                        </li>
                        <li class="active">
                            <a href="echarts-custom-options.html">原生参数</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet box default">

                    <div class="portlet-body">
                        <div class="chart-default ">
                            <div class="chart-body" id="my_chart"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="markdown">
                    <h3>Javascript</h3>
<pre><code class="javascript">require('../../plugins/echarts/module');
var chart = $p.echarts("my_chart");

chart.load({
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        data: ['展现', '点击', '访问', '咨询', '订单']
    },
    calculable: true,
    series: [{
        name: '漏斗图',
        type: 'funnel',
        width: '40%',
        data: [{
            value: 60,
            name: '访问'
        }, {
            value: 40,
            name: '咨询'
        }, {
            value: 20,
            name: '订单'
        }, {
            value: 80,
            name: '点击'
        }, {
            value: 100,
            name: '展现'
        }]
    }, {
        name: '金字塔',
        type: 'funnel',
        x: '50%',
        sort: 'ascending',
        itemStyle: {
            normal: {
            // color: 各异,
            label: {
                position: 'left'
            }
        }
    },
        data: [{
            value: 60,
            name: '访问'
        }, {
            value: 40,
            name: '咨询'
        }, {
            value: 20,
            name: '订单'
        }, {
            value: 80,
            name: '点击'
        }, {
            value: 100,
            name: '展现'
        }]
    }]
});</code></pre>

                    {{>fixtures/echarts-footer}}

                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call([
                "modules/echarts-custom/app",
                "plugins/echarts/loader"
            ], function(app) {
                app.page.options();
            });
        </script>
    {{/inline}}

{{/base}}
